iT邦幫忙

2021 iThome 鐵人賽

DAY 19
0
Modern Web

別再說我不會框架,網頁 Vue 起來!系列 第 19

[Part 8 ] Vue.js 的精隨- 自訂事件

  • 分享至 

  • xImage
  •  

前言

$emit 讓我們可以發送出自訂的事件,例如: 觸發特定的事件(關閉 popup) 或是 子元件向外傳遞資料。

呼叫每一個 $emit 可以傳入兩個參數:

  • 事件名稱: 這個名稱用在父元件作為監聽用
  • payload 物件: 想要傳遞的資料

使用 v-on 指令或是縮寫 @ 來監聽 DOM 被觸發的事件。例如: v-on:click="methodName"@click="methodName"


發送事件

有以下三種方式:

inline events

ex:

<template>
  <my-input @custom-change="logChange"/> <!-- 監聽 custom-change 這個事件-->
</template>

<script>
import MyInput from './components/MyInput.vue'
export default {
  components: {
    MyInput
  },
  methods: {
    logChange (event) {
      console.log(event)
    }
  }
}
</script>
<template>
    <div>
        <p> Wrapper for a text input </p>
        <input 
            type="text"
            placeholder="Custom input!"
            @change='$emit("customChange", $event.target.value)' /* INLINE EMIT! */
        />
    </div>
</template>

Options API

使用 this.$emit !

ex:

<template>
    <div>
        <p> Wrapper for a text input </p>
        <input 
            type="text"
            placeholder="Custom input!"
            @change='customChange'
        />
    </div>
</template>

<script>
export default {
    methods: {
        customChange (event) {
            this.$emit("customChange", event.target.value)
        }
    }
}
</script>

Composition API

因為在元件建立前就會執行 setup,必須使用 setup 第二個參數來先取得 emit方法

兩種方式:

  • setup 傳入 context 物件
  • 解構 context 物件
<template>
    <div>
        <p> Wrapper for a text input </p>
        <input 
            type="text"
            placeholder="Custom input!"
            @change='customChange'
        />
    </div>
</template>

<script>
export default {
    setup (props, context) {
        const customChange = (event) => {
            context.emit("customChange", event.target.value)
        }
        return {
            customChange
        }
    }
}
</script>

<!-- OR -->

<script>
export default {
    setup (props, { emit }) {
        const customChange = (event) => {
            emit("customChange", event.target.value)
        }
        return {
            customChange
        }
    }
}
</script>

補充

命名

在 Vue3,事件名稱會自動轉換大小寫,如果在子元件中使用camelCase,父元件會監聽到kebab-case的事件
ex:

// 子元件 發出事件
this.$emit('myEvent')
<!-- 父元件 監聽事件-->
<my-component @my-event="doSomething"></my-component>

v-model 修飾符 Modifiers

在處理事件時,很常使用 event.preventDefault()event.stopPropagation() ,雖然可以把這些 DOM 事件相關的部分寫入 methods中,但盡可能 methods 單純的包含資料邏輯就好,所以可以使用 Vue 提供給 v-on 的事件修飾符。以點.表示的後綴。

  • .stop 阻擋事件冒泡
  • .prevent 阻擋預設行為
  • .capture 以捕獲形式觸發事件
  • .self 只觸發元素自己的事件
  • .once 指定事件只觸發一次

ex:

<form v-on:submit.prevent="onSubmit">...</form>

.prevent修飾符告訴v-on這個directive 在觸發事件時,要去呼叫 event.preventDefault()

<!-- click 事件只會被觸發一次 --> 
<a @click.once="doThis"></a>

參考

A Guide to Vue $emit – How to Emit Custom Events in Vue


下篇預告

  • Vue CLI

每日一句:
克服恐懼,好像才能變的勇敢 /images/emoticon/emoticon13.gif


上一篇
[番外] 來個音樂撥放器 Play! (續)
下一篇
專案小幫手- Vue CLI
系列文
別再說我不會框架,網頁 Vue 起來!30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言